@color-blue: #3794ff;
.snippet_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  box-sizing: border-box;
  border-bottom: 1px solid #4c4c4c;
  img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  .flex-1 {
    flex: 1;
    margin: 0 14px;
  }
  a {
    margin: 0 6px;
    outline: none;
  }
}

.snippet_title {
  font-size: 20px;
}

.snippet_desc {
  color: #ccc;
  &.md_preview {
    padding: 0;
  }
}

.snippet_item_container {
  border: 1px solid @color-blue;
  border-radius: 4px;
  margin: 20px 0;
  .snippet_item_header {
    border-bottom: 1px solid @color-blue;
    font-size: 16px;
    padding: 6px 14px;
    box-sizing: border-box;
    .snippet_item_title {
      display: inline-block;
      font-weight: 600;
    }
    .snippet_item_size {
      display: inline-block;
      margin: 0 20px 0 10px;
      font-size: 12px;
      color: #ccc;
    }
    .snippet_item_copy {
      font-size: 12px;
      outline: none;
    }
  }
  .snippet_item_body {
    .snippet_content {
      pre {
        // border-left: 1px solid @color-blue;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-x: auto;
        margin: 0;
        padding: 0;
        code {
          display: block;
          line-height: 1.2;
          overflow-x: auto;
          white-space: pre;
          word-wrap: normal;
          tab-size: 2;
          padding: 0 6px;
          box-sizing: border-box;
          margin: 0;
          ul {
            list-style: decimal;
            margin: 0 0 0 40px;
            padding: 0;
            li {
              list-style: decimal;
              border-left: 1px solid @color-blue;
              padding: 2px 5px;
              margin: 0;
              line-height: 14px;
              width: 100%;
              box-sizing: border-box;
              &:first-child {
                padding-top: 6px;
              }
              &:last-child {
                padding-bottom: 6px;
              }
              &::marker {
                content: counter(list-item) '  ';
                color: #808080;
              }
              // &:nth-of-type(even) {
              //   background-color: rgba(255, 255, 255, 0.015);
              //   color: inherit;
              // }
            }
          }
        }
      }
    }
  }
}
